<!DOCTYPE html>
<html layout:decorate="~{layout/master}" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <style>
        .ivu-card-head {
            background: #3a9dff;
        }

        .ivu-card-head p {
            color: #fff;
        }
    </style>
    <script src="/js/jsencrypt.min.js"></script>
</head>
<body>
<div layout:fragment="content">
    <Tabs>
        <Tab-pane label="通过原密码修改" icon="key">
            <Row>
                <i-col span="8">&nbsp;</i-col>
                <i-col span="8">
                    <i-form ref="myForm1" :model="form1" :rules="ruleValidate" :label-width="100">
                        <Form-item label="原密码" prop="oldPwd">
                            <i-input v-model="form1.oldPwd" placeholder="请输入"></i-input>
                        </Form-item>
                        <Form-item label="新密码" prop="newPwd">
                            <i-input v-model="form1.newPwd" placeholder="请输入不少于6位数的密码"></i-input>
                        </Form-item>
                        <Form-item label="新密码确认" prop="newPwd2">
                            <i-input v-model="form1.newPwd2" placeholder="请再输入一次新密码"></i-input>
                        </Form-item>
                        <Form-item>
                            <i-button type="info" :loading="loading1" @click="saveByOPwd" size="large" long>保存
                            </i-button>
                        </Form-item>
                    </i-form>
                </i-col>
                <i-col span="8">&nbsp;</i-col>
            </Row>

        </Tab-pane>
        <Tab-pane label="通过手机号码修改" icon="chatbox-working">
            <Row>
                <i-col span="8">&nbsp;</i-col>
                <i-col span="8">
                    <i-form ref="myForm2" :model="form2" :rules="ruleValidate2" :label-width="100">
                        <Form-item label="手机号码" prop="phone">
                            <i-input v-model="form2.phone" placeholder="请输入"></i-input>
                        </Form-item>
                        <Row>
                            <i-col span="14">
                                <Form-item label="验证码" prop="smscode">
                                    <i-input type="text" v-model.trim="form2.smscode" placeholder="请输入短信密码"/>
                                </Form-item>
                            </i-col>
                            <i-col span="8" offset="1">
                                <i-button class="btn-sendsms" type="ghost" @click="sendSMS"
                                          :disabled="cdForSendSMS" :loading="loadingSendSMSYzm">{{sendBtnText}}
                                </i-button>
                            </i-col>
                        </Row>
                        <Form-item label="新密码" prop="newPwd">
                            <i-input v-model="form2.newPwd" placeholder="请输入不少于6位数的密码"></i-input>
                        </Form-item>
                        <Form-item label="新密码确认" prop="newPwd2">
                            <i-input v-model="form2.newPwd2" placeholder="请再输入一次新密码"></i-input>
                        </Form-item>
                        <Form-item>
                            <i-button type="info" :loading="loading2" @click="saveBySMS" size="large" long>保存
                            </i-button>
                        </Form-item>
                    </i-form>
                </i-col>
                <i-col span="8">&nbsp;</i-col>
            </Row>

        </Tab-pane>
    </Tabs>
</div>
<script layout:fragment="script">
    const m_apis = {
        saveByOldPwd(p_form) {
            let enForm = PB.extend({}, p_form);
            enForm.oldPwd = this._fmtData(p_form.oldPwd);
            enForm.newPwd = this._fmtData(p_form.newPwd);
            enForm.newPwd2 = this._fmtData(p_form.newPwd2);
            return PB.apiRoute('/api/sys/userzj/changePwdByOldPwd', 'POST', enForm)
        },
        saveBySMS(p_form) {
            let enForm = PB.extend({}, p_form);
            enForm.phone = this._fmtData(p_form.phone);
            enForm.smscode = this._fmtData(p_form.smscode);
            enForm.newPwd = this._fmtData(p_form.newPwd);
            enForm.newPwd2 = this._fmtData(p_form.newPwd2);
            return PB.apiRoute('/api/sys/userzj/changePwdBySMS', 'POST', enForm)
        },
        sendSMSYzm(p_mobile) {
            return PB.apiRoute('/api/sys/user/sendSMSYzm?mobile=' + p_mobile, 'POST')
        },
        _fmtData(str) {
            var jsencrypt = new JSEncrypt();
            jsencrypt.setPublicKey(window.winRSAPublicKey);
            // enData用来装载加密后的数据
            return jsencrypt.encrypt(str);
        }
    };
    let vu = new Vue({
        el: '#app',
        data: {
            apis: m_apis,
            form1: {},
            form2: {},
            sendBtnText: '发送短信',
            cdForSendSMS: false,
            loadingSendSMSYzm: false,
            loading1: false,
            loading2: false,
            ruleValidate: {
                oldPwd: [
                    {required: true, message: '账号不能为空', trigger: 'blur'}
                ],
                newPwd: [
                    {required: true, message: '用户名不能为空', trigger: 'blur'}
                ],
                newPwd2: [
                    {required: true, message: '密码不能为空', trigger: 'blur'}
                ]
            },
            ruleValidate2: {
                phone: [
                    {required: true, message: '账号不能为空', trigger: 'blur'}
                ],
                smscode: [
                    {required: true, message: '用户名不能为空', trigger: 'blur'}
                ],
                newPwd: [
                    {required: true, message: '用户名不能为空', trigger: 'blur'}
                ],
                newPwd2: [
                    {required: true, message: '密码不能为空', trigger: 'blur'}
                ]
            }
        },
        created() {

        },
        methods: {
            sendSMS() {
                let phone = this.form2.phone;
                if (phone) {
                    let that = this;
                    this.loadingSendSMSYzm = true;
                    PB.ajax(this.apis.sendSMSYzm(phone), {
                        showLoading: false,
                        complete: function () {
                            that.loadingSendSMSYzm = false;
                        }
                    }, function (d) {
                        if (d.success) {
                            that.cdForSendSMS = true;
                            let tim = 60;
                            window.setinter = setInterval(() => {
                                that.sendBtnText = tim + 'S';
                                if (tim === 0) {
                                    that.cdForSendSMS = false;
                                    that.sendBtnText = '发送短信';
                                    window.clearInterval(window.setinter);
                                }
                                --tim;
                            }, 1000);
                            PB.toast('短信已下发', 'success');
                        }
                    });
                }
            },
            chkForm1NewPwd() {
                if (!PB.chkPWD(this.form1.newPwd)) {
                    return false;
                }

                if (this.form1.newPwd !== this.form1.newPwd2) {
                    PB.alert('新密码2次输入不一致');
                    return false;
                }

                return true;
            },
            chkForm2NewPwd() {
                if (!PB.chkPWD(this.form2.newPwd)) {
                    return false;
                }

                if (this.form2.newPwd !== this.form2.newPwd2) {
                    PB.alert('新密码2次输入不一致');
                    return false;
                }


                return true;
            },
            saveByOPwd() {
                if (!this.chkForm1NewPwd()) {
                    return;
                }

                this.$refs['myForm1'].validate((valid) => {
                    if (valid) {
                        this.loading1 = true;

                        let that = this;

                        PB.ajax(this.apis.saveByOldPwd(this.form1), {
                            showLoading: false,
                            complete: function () {
                                that.loading1 = false;
                            }
                        }, function (d) {
                            PB.toast(d);
                            that.$refs['myForm1'].resetFields();
                        });
                    } else {
                        PB.alert('请填写完整信息再提交!');
                    }
                })
            },
            saveBySMS() {
                if (!this.chkForm2NewPwd()) {
                    return;
                }

                this.$refs['myForm2'].validate((valid) => {
                    if (valid) {
                        this.loading2 = true;

                        let that = this;

                        PB.ajax(this.apis.saveBySMS(this.form2), {
                            showLoading: false,
                            complete: function () {
                                that.loading2 = false;
                            }
                        }, function (d) {
                            PB.toast(d);
                            that.$refs['myForm2'].resetFields();
                        });
                    } else {
                        PB.alert('请填写完整信息再提交!');
                    }
                })
            },
        }
    })

</script>
</body>
</html>
